<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>employee-list</title>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/jquery/jquery-1.8.3.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>

    <script th:inline="javascript">
        var countNum = [[${count}]];
        var curr = [[${pageNo}]];
        var limit = [[${pageSize}]];

        layui.use('laypage', function () {
            var laypage = layui.laypage;


            //执行一个laypage实例
            laypage.render({
                elem: 'paging',
                count: countNum,
                curr: curr,
                limit: limit,
                limits: [5, 10, 15, 20],
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    var curr = obj.curr;
                    var limit = obj.limit;
                    $('#pageNo').val(curr);
                    $('#pageSize').val(limit);
                    //首次不执行
                    if (!first) {
                        //do something
                        $('#submitForm').submit();
                    }
                }
            });
        });

    </script>
    <style type="text/css">

        .layui-table {
            width: 80%;
        }
    </style>

</head>
<body>
<!-- 原始 master 123-->
<div class="body">
    <div class="layui-row">
    </div>
    <div class="layui-row">
        <form action="/department/list" id="submitForm" method="post">
            <input id="pageNo" type="hidden" name="pageNo"/>
            <input id="pageSize" type="hidden" name="pageSize"/>
            <table class="layui-table">
                <colgroup>
                    <col width="50"/>
                    <col width="80"/>

                </colgroup>
                <thead>
                <tr>
                    <th>部门编号</th>
                    <th>名称</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="department:${departments}">
                    <td><span th:text="${department.departmentId}"></span></td>
                    <td><span th:text="${department.department}"></span></td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
    <div class="layui-row">
        <div id="paging"></div>
    </div>
</div>
</body>
</html>